<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">

    <title>以计算机科学与技术专业为例的学生学习过程分析系统</title>
    <!--引入相关的js文件-->
    <link href="../backPage/ui/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../backPage/ui/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="../backPage/ui/waves-0.7.5/waves.css" rel="stylesheet"/>
    <link href="../backPage/ui/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>

    <script src="../backPage/ui/js/jquery-3.3.1.min.js"></script>
    <script src="../backPage/ui/waves-0.7.5/waves.js"></script>
    <script src="../backPage/ui/jquery-confirm/jquery-confirm.min.js"></script>
    <script src="../backPage/ui/bootstrap-3.3.0/js/bootstrap.min.js"></script>
    <script src="../backPage/ui/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
</head>

<body>
<div id="main">
    <div id="toolbar">
        <button class="btn btn-default" href="javascript:;" onclick="createAction()">新增教师信息</button>
        <button class="btn btn-default" href="javascript:;" onclick="updateAction()">编辑教师信息</button>
        <button class="btn btn-default" href="javascript:;" onclick="deleteAction()">删除教师信息</button>
        <button class="btn btn-default" href="javascript:;" onclick="uploadAction()">导入教师信息</button>
        <button class="btn btn-default" href="javascript:;"><a style="text-decoration:none; color:black;" id="uploadTeacherModel" href="/download/uploadModel/UploadTeacherInfos.xls">下载导入教师信息模板</a></button>
        <br/>
    </div>
    <table id="table"></table>
</div>

<script>
    // 初始化input特效
    function initMaterialInput() {
        $('form input[type="text"]').each(function () {
            if ($(this).val() != '') {
                $(this).parent().find('label').addClass('active');
            }
        });
    }

    //删除所有学生信息
    var clearAllStudentInfoDialog;
    function clearAllStudentInfo(){
        clearStudentInfoByWeekDialog = $.confirm({
            type: 'red',
            animationSpeed: 300,
            title: false,
            content: '确认删除所有学生信息？',
            buttons: {
                confirm: {
                    text: '确认',
                    btnClass: 'waves-effect waves-button',
                    action: function () {
                        $.ajax({
                            type: 'get',
                            url: '/evaluate/student/clearAllStudentInfo',
                            success: function(data) {
                                if(data == "ok"){
                                    alert("清除成功");
                                    var $table = $("#table");
                                    $table.bootstrapTable('refresh');
                                }else{
                                    alert("清除失败,请重试!");
                                }
                            },
                            error: function(XMLHttpRequest, textStatus, errorThrown) {
                                $.confirm({
                                    theme: 'dark',
                                    animation: 'rotateX',
                                    closeAnimation: 'rotateX',
                                    title: false,
                                    content: textStatus,
                                    buttons: {
                                        confirm: {
                                            text: '确认',
                                            btnClass: 'waves-effect waves-button waves-light'
                                        }
                                    }
                                });
                            }
                        });
                    }
                },
                cancel: {
                    text: '取消',
                    btnClass: 'waves-effect waves-button'
                }
            }
        });
    }

    var $table = $('#table');

    //校验手机号码是否合法
    function validateTel(tel){
        var mobilereg1 = /^1[3|5|6|7|8|9][0-9]{9}$/; // 1[356789][0-9] （后面再接8位数）
        var mobilereg2 = /^14[5|7][0-9]{8}$/; // 14[57] （后面再接8位数）
        if (!mobilereg1.test(tel) && !mobilereg2.test(tel)) {
            return false;
        }
        return true;
    }

    function validateBirthday(birthday){
        var birthdayRegex = /((^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(10|12|0?[13578])([-\/\._])(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(11|0?[469])([-\/\._])(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(0?2)([-\/\._])(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([3579][26]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][13579][26])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][13579][26])([-\/\._])(0?2)([-\/\._])(29)$))/ig
        if(!birthdayRegex.test(birthday)){
            return false;
        }else{
            return true;
        }
    }

    function validateEmail(email){
        var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        if(!reg.test(email)){
            return false;
        }else{
            return true;
        }
    }
    $(function() {
        init();
        //新增教师信息
        $("#submitbutton").click(function() {
            var name = $("#name").val();
            var sex = $("#sex option:selected").val();
            var age = $("#age").val();
            var transbirthday = $("#transbirthday").val();
            var tel = $("#tel").val();
            var nation = $("#nation option:selected").val();
            var positonid = $('#positonid option:selected').val();
            var address = $("#address").val();
            var workrole = $("#workrole option:selected").val();
            var email = $("#email").val();

            if(name.length == 0||parseInt(age)<=0||transbirthday.length == 0||tel.length==0||address.length==0||age.length==0||email.length == 0){
                alert("请填写完整信息");
                return;
            }else{
                age = parseInt(age)
                positonid = parseInt(positonid)
                workrole = parseInt(workrole);
            }


            if(!validateTel(tel)){
                alert("手机号码不合法,请重试!");
                return;
            }

            if(!validateBirthday(transbirthday)){
                alert("出生时间非法,请重试!");
                return;
            }

            if(!validateEmail(email)){
                alert("邮箱非法,请重试!");
                return;
            }

            $.ajax({
                url:"/studentManageSystem/addTeacher",
                type:"post",
                data:{name:name,sex:sex,transbirthday:transbirthday,email:email,age:age,tel:tel,nation:nation,position:positonid,address:address,workrole:workrole},
                success:function(data){
                    if(data!=""){
                        alert("添加成功");
                        $table.bootstrapTable('refresh');
                        $("#createModal").modal('hide');
                        $("#name").val("");
                        $("#transbirthday").val("");
                        $("#age").val("0");
                        $("#tel").val("");
                        $("#address").val("");
                    }else{
                        alert("添加失败");
                    }
                }
            })

        });

        //上传信息
        $("#uploadbutton").click(function(){
            var fname = $("#file").val();
            var pathArray = fname.split("\\");
            if(pathArray[pathArray.length - 1].indexOf(".") == -1){
                alert("请上传文件");
                return;
            }else{
                filetype = pathArray[pathArray.length - 1].split(".")[1];

                if(filetype == "xls"){
                    var type = "file";          //后台接收时需要的参数名称，自定义即可
                    var id = "file";            //即input的id，用来寻找值
                    var formData = new FormData();
                    formData.append(type, $("#"+id)[0].files[0]);    //生成一对表单属性
                    $.ajax({
                        type: "post",           //因为是传输文件，所以必须是post
                        url:"/studentManageSystem/uploadTeacherInfos",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            if(data != ""){
                                $table.bootstrapTable('refresh');
                                alert(data);
                            }else{
                                alert("导入失败");
                            }
                        }
                    });

                }else{
                    alert("请上传xls、xlsx格式文件!");
                    return;
                }
            }
        });

        //更新学生信息
        $("#updateSubmitButton").click(function(){
            var id = $("#updateId").val();
            var name = $("#updateName").val();
            var sex = $("#updateSex option:selected").val();
            var transbirthday = $("#updateBirthday").val();
            var age = $("#updateAge").val();
            var tel = $("#updateTel").val();
            var nation = $("#updateNation option:selected").val();
            var position = $("#updatePositonid option:selected").val();
            var address = $("#updateAddress").val();
            var workrole = $("#updateWorkrole option:selected").val();
            var email = $("#updateEmail").val();

            //alert(id+" "+name+" "+sex+" "+birthday+" "+age+" "+tel+" "+nation+" "+classid+" "+address+" "+deviceinfo);

            if(name.length == 0||parseInt(age)<=0||transbirthday.length == 0||tel.length==0||address.length==0||age.length==0||email.length == 0){
                alert("请填写完整信息");
                return;
            }else{
                age = parseInt(age)
                positon = parseInt(position)
                workrole = parseInt(workrole);
            }


            if(!validateTel(tel)){
                alert("手机号码不合法,请重试!");
                return;
            }

            if(!validateBirthday(transbirthday)){
                alert("出生时间非法,请重试!");
                return;
            }

            if(!validateEmail(email)){
                alert("邮箱非法,请重试!");
                return;
            }

            $.ajax({
                url:"/studentManageSystem/updateTeacher",
                type:"post",
                data:{id:id,name:name,sex:sex,transbirthday:transbirthday,email:email,age:age,tel:tel,nation:nation,position:position,address:address,workrole:workrole},
                success:function(data){
                    if(data!=""){
                        alert("修改成功");
                        $table.bootstrapTable('refresh');
                        $("#updateModal").modal('hide');
                    }else{
                        alert("添加失败");
                    }
                }
            })
        });


        function init(){
            $("#nation").empty();
            $.ajax({
                url:"/util/getNations",
                type:"post",
                success:function(data){
                    for(var i = 0;i<data.length;i++){
                        $("#nation").append("<option value="+data[i]['nationname']+">"+data[i]['nationname']+"</option>")
                    }
                }
            });

            $("#positonid").empty();
            $.ajax({
                url:"/util/getTeacherPosition",
                type:"post",
                success:function(data){
                    for(var i = 0;i<data.length;i++){
                        $("#positonid").append("<option value="+data[i]['positionid']+">"+data[i]['positionname']+"</option>")
                    }
                }
            });

            $("#workrole").empty();
            $.ajax({
                url:"/util/getWorkRoles",
                type:"post",
                success:function(data){
                    for(var i = 0;i<data.length;i++){
                        $("#workrole").append("<option value="+data[i]['workroleid']+">"+data[i]['workrolename']+"</option>")
                    }
                }
            });



            $("#updateNation").empty();
            $.ajax({
                url:"/util/getNations",
                type:"post",
                success:function(data){
                    for(var i = 0;i<data.length;i++){
                        $("#updateNation").append("<option value="+data[i]['nationname']+">"+data[i]['nationname']+"</option>")
                    }
                }
            });

            $("#updatePositonid").empty();
            $.ajax({
                url:"/util/getTeacherPosition",
                type:"post",
                success:function(data){
                    for(var i = 0;i<data.length;i++){
                        $("#updatePositonid").append("<option value="+data[i]['positionid']+">"+data[i]['positionname']+"</option>")
                    }
                }
            });

            $("#updateWorkrole").empty();
            $.ajax({
                url:"/util/getWorkRoles",
                type:"post",
                success:function(data){
                    for(var i = 0;i<data.length;i++){
                        $("#updateWorkrole").append("<option value="+data[i]['workroleid']+">"+data[i]['workrolename']+"</option>")
                    }
                }
            });
        }

        // bootstrap table初始化
        $table.bootstrapTable({
            url: '/studentManageSystem/getTeacherInfoList',
            height: getHeight(),
            striped: true,
            search: true,
            showRefresh: true,
            showColumns: true,
            minimumCountColumns: 2,
            clickToSelect: true,
            detailView: true,
            pagination: true,
            paginationLoop: false,
            sidePagination: 'server',
            silentSort: false,
            sortOrder: "desc",
            smartDisplay: false,
            escape: true,
            searchOnEnterKey: true,
            idField: 'id',
            maintainSelected: true,
            toolbar: '#toolbar',
            columns: [
                {field: 'ck', checkbox: true},
                {field: 'id', title: '工号', align: 'center'},
                {field: 'name', title: '姓名',align: 'center'},
                {field: 'workroleName', title: '职位',align: 'center'},
                {field: 'age', title: '年龄',align: 'center'},
                {field: 'positionName', title: '职称',align: 'center'},
                {field: 'sex', title: '性别',align: 'center'},
                {field: 'birthday', title: '出生日期',align: 'center',formatter:'timeFormatter'},
                {field: 'nation', title: '民族',align: 'center'},
                {field: 'tel', title: '电话',align: 'center'},
                {field: 'address', title: '地址',align: 'center'},
                {field: 'email',title:'邮箱',align:'center'},
                {field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
            ]
        });
    });

    // 格式化操作按钮
    function actionFormatter(value, row, index) {
        return [
            '<a class="update" href="javascript:;" onclick="updateAction()" data-toggle="tooltip" title="编辑"><i class="glyphicon glyphicon-edit"></i></a>　',
            '<a class="delete" href="javascript:;" onclick="deleteAction()" data-toggle="tooltip" title="删除"><i class="glyphicon glyphicon-remove"></i></a>'
        ].join('');
    }
    // 格式化时间
    function timeFormatter(value , row, index) {
        return new Date(value).toLocaleString().split(' ')[0];
    }

    function getHeight() {
        return $(window).height() - 20;
    }

    // 删除
    var deleteDialog;
    function deleteAction() {
        var rows = $table.bootstrapTable('getSelections');
        if (rows.length == 0) {
            $.confirm({
                title: false,
                content: '请至少选择一条记录！',
                autoClose: 'cancel|3000',
                backgroundDismiss: true,
                buttons: {
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        } else {
            deleteDialog = $.confirm({
                type: 'red',
                animationSpeed: 300,
                title: false,
                content: '确认删除该教师信息吗？',
                buttons: {
                    confirm: {
                        text: '确认',
                        btnClass: 'waves-effect waves-button',
                        action: function () {
                            var ids = new Array();
                            for (var i in rows) {
                                ids.push(rows[i].id);
                            }
                            $.ajax({
                                type: 'get',
                                url: '/studentManageSystem/deleteTeacher/'+ids.join("-"),
                                success: function(result) {
                                    if(result =="OK"){
                                        deleteDialog.close();
                                        $table.bootstrapTable('refresh');
                                        alert("删除成功");
                                    }else if(result == "FAILED"){
                                        alert("删除失败");
                                    }
                                },
                                error: function(XMLHttpRequest, textStatus, errorThrown) {
                                    $.confirm({
                                        theme: 'dark',
                                        animation: 'rotateX',
                                        closeAnimation: 'rotateX',
                                        title: false,
                                        content: textStatus,
                                        buttons: {
                                            confirm: {
                                                text: '确认',
                                                btnClass: 'waves-effect waves-button waves-light'
                                            }
                                        }
                                    });
                                }
                            });
                        }
                    },
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        }
    }

    //创建学生信息
    function createAction(){
        $("#createModal").modal("show");
    }

    //上传教师信息
    function uploadAction(){
        $("#uploadModal").modal('show');
    }

    //编辑学生信息
    function updateAction() {
        var rows = $table.bootstrapTable('getSelections');
        if (rows.length == 0) {
            $.confirm({
                title: false,
                content: '请至少选择一条记录！',
                autoClose: 'cancel|3000',
                backgroundDismiss: true,
                buttons: {
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        } else {
            //赋初值
            var obj = rows[0];
            var id = obj["id"];
            var name = obj["name"];
            var sex = obj['sex'];
            var birthday = obj['birthday'];
            var age = obj['age'];
            var nation = obj['nation'];
            var position = obj['position'];
            var tel = obj['tel'];
            var address = obj['address'];
            var workrole = obj['workrole'];
            var email = obj['email'];

            $("#updateId").val(id);
            $("#updateName").val(name);
            $("#updateSex option[value='"+sex+"']").attr("selected","selected");
            $("#updateBirthday").val(birthday.substring(0,10));
            $("#updateAge").val(age);
            $("#updateTel").val(tel);
            $("#updateAddress").val(address);
            $("#updateNation option[value='"+nation+"']").attr("selected","selected");
            $("#updatePositonid").val(""+(parseInt(position)));
            $("#updateEmail").val(email);
            $("#updateWorkrole option[value='"+workrole+"']").attr("selected","selected");
            $("#updateModal").modal('show');
        }
    }

</script>

<!-- 添加教师信息模态框（Modal） -->
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="createModalTitle">
                    添加教师信息
                </h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" placeholder="Name">
                    </div>

                    <div class="form-group">
                        <label for="sex">性别</label>
                        <select class="form-control" id="sex" name="sex" placeholder="Sex">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input class="form-control" id="age" type="number" min="0" placeholder="Age"></input>
                    </div>

                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="text" class="form-control" id="email" placeholder="Email">
                    </div>

                    <div class="form-group">
                        <label for="transbirthday">出生日期</label>
                        <input class="form-control" id="transbirthday" name="transbirthday" type="date"  placeholder="Birthday"></input>
                    </div>

                    <div class="form-group">
                        <label for="nation">民族</label>
                        <select class="form-control" id="nation" name="nation"></select>
                    </div>

                    <div class="form-group">
                        <label for="positonid">职称</label>
                        <select class="form-control" id="positonid" name="positonid"></select>
                    </div>

                    <div class="form-group">
                        <label for="tel">电话</label>
                        <input class="form-control" id="tel" name="tel" type="tel"  placeholder="Tel"/>
                    </div>

                    <div class="form-group">
                        <label for="address">地址</label>
                        <input class="form-control" id="address" name="address" type="text" placeholder="Address"/>
                    </div>

                    <div class="form-group">
                        <label for="workrole">职位</label>
                        <select class="form-control" id="workrole" name="workrole"></select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="submitbutton">
                    添加
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<!-- 修改教师信息模态框（Modal） -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="updateModalTitle">
                    编辑学生信息
                </h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="updateId">工号</label>
                        <input type="text" class="form-control" id="updateId" name="updateId" placeholder="StudentNumber" readonly="readonly"/>
                    </div>

                    <div class="form-group">
                        <label for="updateName">姓名</label>
                        <input type="text" class="form-control" id="updateName" placeholder="Name">
                    </div>

                    <div class="form-group">
                        <label for="sex">性别</label>
                        <select class="form-control" id="updateSex" name="updateSex" placeholder="Sex">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="updateEmail">邮箱</label>
                        <input type="text" class="form-control" id="updateEmail" placeholder="Email">
                    </div>

                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input class="form-control" id="updateAge" name="updateAge" type="number" min="0" placeholder="Age"></input>
                    </div>

                    <div class="form-group">
                        <label for="transbirthday">出生日期</label>
                        <input class="form-control" id="updateBirthday" name="updateBirthday" type="date"  placeholder="Birthday"></input>
                    </div>

                    <div class="form-group">
                        <label for="nation">民族</label>
                        <select class="form-control" id="updateNation" name="updateNation"></select>
                    </div>

                    <div class="form-group">
                        <label for="updatePositonid">职称</label>
                        <select class="form-control" id="updatePositonid" name="updatePositonid"></select>
                    </div>

                    <div class="form-group">
                        <label for="tel">电话</label>
                        <input class="form-control" id="updateTel" name="updateTel" type="tel"  placeholder="Tel"/>
                    </div>

                    <div class="form-group">
                        <label for="address">地址</label>
                        <input class="form-control" id="updateAddress" name="updateAddress" type="text" placeholder="Address"/>
                    </div>

                    <div class="form-group">
                        <label for="updateWorkrole">职位</label>
                        <select class="form-control" id="updateWorkrole" name="updateWorkrole"></select>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="updateSubmitButton">
                    确认修改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 导入教师信息模态框（Modal） -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="uploadModalTitle">
                    导入教师信息
                </h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="tel">上传文件</label>
                        <input type="file" class="form-control" id="file" name="file" type="tel"/>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="uploadbutton">
                    添加
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</body>
</html>